<template>
	<div class="video-upload-wrap">
		<div class="img-upload" v-if="!videoUrl && !uploadStart">
			<div class="img-upload_area-sign">+</div>
			<input type="file" class="img-upload_input" @change="uploadImg" name="file" accept=".mp4">
		</div>
		
		<el-progress v-if='uploadStart' type="circle" :percentage="percentage"></el-progress>
		<div class="col-9">说明：视频大小不能超过5MB</div>
	</div>
</template>
<script>
	import { GET_POLICY } from '@/api/crm'
	export default {
		props: {
			fileSize: Number,
			videoUrl: {
				type: String,
				default: ''
			},
		},
		data() {
			return{
				uploadStart: false,
				percentage: 0
			}
		},
		methods: {
			uploadImg(e) {
				const files = e.target.files || e.dataTransfer.files;

				const file = files[0]
				const name = file.name || ''
				const fileType = name.replace(/.+\./, "")

				const typeArray = ['mp4']
				if(!typeArray.includes(fileType)) {
					this.$message({
						message: '请上传mp4文件',
						type: 'warning'
					})
					return false;
				}

				if(file.size > this.fileSize * 1000 * 1024) {
					this.$message({
						message: `文件大小不大于${this.fileSize}M`,
						type: 'warning'
					})
					return false;
				}

				this.$http.get(GET_POLICY)
					.then((res) => {
						const fd = new FormData()
						const {
							accessid,
							host,
							policy,
							signature,
							dir,
							expire
						} = res.data.data
						fd.append('OSSAccessKeyId', accessid)
						fd.append('policy', policy)
						fd.append('signature', signature)
						fd.append('key', dir + expire + '.' + fileType)
						fd.append('success_action_status', 200)
						fd.append('file', file)
						const xhr = new XMLHttpRequest()
						xhr.open('post', host, true)
				
						//进度获取
						this.percentage = 0
						this.uploadStart = true
						xhr.upload.onprogress= (e)=>{
							var percent = e.loaded / e.total * 100;
							var percentStr = String(percent);
							if(percentStr == "100") {
								percentStr = "100.0";
							}
							percentStr = percentStr.substring(0, percentStr.indexOf("."));
							this.percentage = +percentStr
						}

						//上传状态
						xhr.addEventListener('load', (e) => {
							
							if(e.target.status !== 200) {
								return
							}
							if(e.target.status === 200) {
								
								this.$emit('update:videoUrl', host + '/' + dir + expire + '.' + fileType)
								this.uploadStart = false
							}
						}, false)
						xhr.send(fd)
					})

			}
		}
	}
</script>

<style lang="scss">
	.video-upload-wrap {
		position: relative;
		input[type="file"] {
			display: block!important;
		}
		.img-upload {
			width: 100px;
			height: 100px;
			border: 1px dashed #d9d9d9;
			border-radius: 4px;
			cursor: pointer;
			position: relative;
			&:hover {
				border: 1px dashed #1E9FFF;
			}
			&_area-sign {
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				transform: scale(2);
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				color: #8C939D;
			}
			&_preview {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover!important;
			}
			&_input {
				width: 100%;
				height: 100%;
				opacity: 0;
				cursor: pointer;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.el-progress{
			width: 100px;
			height: 100px;
		}
		.el-progress-circle{
			padding: 20px;
			height: 100px!important;
			width: 100px!important;
			background: #FFFFFF;
			border: 1px dashed #d9d9d9;
			box-sizing: border-box;
		}
	}
</style>